<template>
	<view style="width: 100%;height: 100%;">
		<view class="more">
			<view class="mo"><view class="mo_01">楼栋长申请</view></view>
		</view>
		
		<view class="" v-if="!isShow">
			<view class="content">
				<view class="row">
					<text class="tit">楼栋长姓名：</text>
					<input class="input" type="text" @input="nameInput" placeholder="姓名" placeholder-class="placeholder" :value="name" />
				</view>
				<view class="row">
					<text class="tit">选择申请职位：</text>
					<view class="text-lg" style="margin-top: 5rpx;" @click="showNumberPopup">{{ position == '' ? '选择职位' : position }}</view>
				</view>
			
				<view v-if="show">
					<view class="row">
						<text class="tit">所在校区：</text>
						<view class="text-lg" style="margin-top: 5rpx;" @click="showSchoolPopup">{{ school == '' ? '必选选择所在校区' : school }}</view>
					</view>
					<view class="row">
						<text class="tit">所住楼栋：</text>
						<view class="text-lg" style="margin-top: 5rpx;" @click="showAreaPopup">{{ area == '' ? '必选选择所在楼栋' : area }}</view>
					</view>
					<view class="row">
						<text class="tit">所在年级：</text>
						<view class="text-lg" style="margin-top: 8rpx;" @click="showClassPopup">{{ classnum == '' ? '选择年级' : classnum }}</view>
					</view>
					<view class="row">
						<text class="tit">所在学院：</text>
						<view class="text-lg" style="margin-top: 5rpx;" @click="showCollegePopup">{{ college == '' ? '选择学院' : college }}</view>
					</view>
					<!-- <view class="row">
						<text class="tit">绑定的负责人：</text>
						<view class="text-lg" style="margin-top: 5rpx;" @click="showparentnamePopup">{{ parentname == '' ? '选择负责人' : parentname }}</view>
					</view> -->
					<view class="row">
						<text class="tit">绑定的楼栋：</text>
						<view class="text-lg" style="margin-top: 5rpx;" @click="showlounamePopup">{{ louname == '' ? '选择绑定楼栋' : louname }}</view>
					</view>
					<view class="row">
						<text class="tit">预留手机号：</text>
						<input class="input" type="number" @input="phoneInput" placeholder="手机号" placeholder-class="placeholder" :value="phone" />
					</view>
				</view>
			
				<view class="" style="display: flex;width: 100%;align-items: center;justify-content: center;">
					<view class="login__info__item__button1 tn-cool-bg-color-15--reverse" hover-class="tn-hover" :hover-stay-time="150" @tap="confirm()">提交</view>
				</view>
				
			</view>
			
		</view>
		<view v-else class="" style="display: flex;width: 100%;height: 100%;">
			<view class="loupeoplecheck">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="text-bold text-lg">楼栋长姓名：{{userinfo.name}}</view>
					<view class="text-bold text-xl bg-gradual-blue">{{userinfo.status == 0? '正在审核':'已通过审核'}}</view>
				</view>
				<view class="text-black margin-top-xs">楼栋长所住楼栋：{{userinfo.lou}}</view>
				<view class="text-black">楼栋长所在班级：{{userinfo.classname}}</view>
				<view class="text-bold text-red text-lg margin-top-xs">绑定的楼栋:{{userinfo.louname}}</view>
				<view class="margin-top-xs text-lg text-blue text-bold">负责人绑定情况：{{userinfo.nameopenid? userinfo.nameopenid:'未绑定负责人'}}</view>
				<view class="text-right-view text-bold" style="margin-top: 10rpx;">申请时间：{{userinfo.creattime}}</view>
				<!-- //修改信息 -->
				<view style="display: flex;width: 100%;margin-top: 10rpx">
					<view class="login__info__item__button tn-cool-bg-color-15--reverse " hover-class="tn-hover" :hover-stay-time="150" @click="setlouPeople()">修改信息</view>
				</view>
			</view>
		</view>
		
		<!-- //消息弹窗 -->
		<u-toast ref="uToast" />
		<u-picker mode="selector" @confirm="SchoolConfirm" v-model="showSchool" :isDefault-selector="[0]" :range="selectorSchool" range-key="schoolname"></u-picker>
		<u-picker mode="selector" @confirm="NumberConfirm" v-model="showNumber" :isDefault-selector="[0]" :range="selector"></u-picker>
		<u-picker mode="selector" @confirm="AreaConfirm" v-model="showArea" :isDefault-selector="[0]" :range="selectorArea" range-key="name"></u-picker>
		<u-picker mode="selector" @confirm="CollegeConfirm" v-model="showAreaCollege" :isDefault-selector="[0]" :range="selectorcollege"></u-picker>
		<u-picker mode="selector" @confirm="ClassConfirm" v-model="showAreaClass" :isDefault-selector="[0]" :range="selectorClass"></u-picker>
		<u-picker mode="selector" @confirm="positionConfirm" v-model="showAreaposition" :isDefault-selector="[0]" :range="selectorNumberCharge"></u-picker>
		<u-picker mode="selector" @confirm="parnameConfirm" v-model="showparentname" :isDefault-selector="[0]" :range="selectorparname" range-key="name"></u-picker>
		<u-picker mode="selector" @confirm="lounameConfirm" v-model="showlouname" :isDefault-selector="[0]" :range="selectorlouname" range-key="name"></u-picker>
	</view>
</template>

<script>
const db = uniCloud.database();
export default {
	data() {
		return {
			id: '',
			userinfo: {},
			openid: '',
			name: '',
			schoolList: [],
			show: true,
			isShow: false,//是否已申请
			louname: '', //绑定楼栋
			anonymous: false, //匿名
			area: '', //楼栋
			classnum: '', //年级
			college: '', //学院
			parentname: '', //绑定的负责人
			paropenid: '', //绑定的负责人openid
			rank: 1,
			position: '', //职位
			school: '', //学校
			schoolnum: 0,
			phone: '', //预留手机号
			peoplecharge: [
				{
					openid: 'oryqr6RFu9ZUEIsaMW2_eotxyRKI',
					name: '郑锦驰'
				},
				{
					openid: 'oryqr6RFu9ZUEIsaMW2_eotxyRKI',
					name: '郑锦驰'
				}
			],
			showNumber: false,
			showArea: false,
			showSchool: false,
			showAreaClass: false,
			showAreaCollege: false,
			showAreaposition: false,
			showparentname: false,
			showlouname: false,
			selector: [],
			selectorcollege: ['计算机学院'],
			selectorSchool: [],
			selectorClass: ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027'],
			selectorNumber: ['楼栋长', '骑手', '分餐员'],
			selectorNumberCharge: ['楼栋长', '骑手', '分餐员', '核心负责人'],
			selectorArea: ['11'],
			selectorparname: ['杨宇超', '徐晋'],
			selectorlouname: [],
			selectorAreaZhong: []
		};
	},


	//系统加载
	onLoad(options) {
		let that = this;
		that.openid = options.openid;
		that.rank = options.rank;
		// 登陆检测
		// that.checkLogin();

		//模拟数据
		that.openid = 'oryqr6V-vBwVfIbrIF6iXaJixh7Y';
		// that.openid = 'oryqr6V-vBwVfIb';
		//判断是否已申请
		that.checkPeople();
		
		that.selectorparname = that.peoplecharge;
		// that.initSchool();
	},

	onShow() {
		let that = this;
		that.initSchool();
		console.log('校区分布：');
	},

	methods: {
		
		
		//判断是否已申请
		checkPeople(){
			let that = this;
			console.log("openid",that.openid)
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/user/getWeiPositionByOpenid?openid='+that.openid,
				success(res) {
					if (res.data.status == 200) {
						console.log("楼栋长申请：",res.data.data)
						uni.showToast({
							title: res.data.data.name
						})
						that.isShow = true;
						that.userinfo = res.data.data;
						// if(res.data.data.>0){
						// 	that.isShow = true;
						// }
					} else {
						that.$refs.uToast.show({
							title: '网络错误，请重试',
							type: 'error'
						});
					}
				}
			});
			
		},
		//修改楼栋长申请
		setlouPeople(){
			let that = this;
			
			
			//赋值该楼栋长信息
			that.name = that.userinfo.name; //姓名
			that.lou =  that.userinfo.area; //地址
			that.openid = that.userinfo.openid; //id
			that.classname =  that.userinfo.classnum;//年级
			that.college =  that.userinfo.college; //学院
			that.position = that.userinfo.position; //职位
			that.school = that.userinfo.schoolnum;//学校
			that.paropenid = that.userinfo.paropenid; //负责人id
			that.nameopenid = that.userinfo.parentname; //负责人姓名
			that.louname = that.userinfo.louname; //绑定楼栋
			that.mobile = that.userinfo.phone; //预留的电话号码
			
			//显示
			that.isShow = false;
			
			
			
			
			
			
		},
		
		
		
		//校区加载
		initSchool() {
			let that = this;
			db.collection('school')
				.get({})
				.then(res => {
					that.schoolList = res.result.data;
					console.log('校区分布：', res);
					that.initlist( res.result.data)
				});
		},
		
		
		//选择的学校
		initlist(schoolList) {
			let that  = this;
			let schoolresultList = [];
			// console.log("构造的数组：",schoolresultList)
			//构造校区选择
			console.log('构造的数组：', schoolList.length);		
			for (let i = 0; i < schoolList.length; i++) {
				var school = {
				};
				school.schoolnum = schoolList[i].data.school;
				school.schoolname = schoolList[i].data.schoolName;
				schoolresultList.push(school);
			}
			console.log('构造的数组：', schoolresultList);
			that.selectorSchool = schoolresultList;
		},
		
		
		
		//登陆验证
		checkLogin() {
			let that = this;
			if (that.openid == undefined || that.openid == '') {
				uni.showModal({
					title: '您的登录缓存已经过期，需要重新登录',
					success(res) {
						uni.switchTab({
							url: '../../me/me'
						});
					}
				});
			}
		},



		showCollegePopup() {
			this.showAreaCollege = true;
		},
		showSchoolPopup() {
			this.showSchool = true;
		},
		showAreaPopup() {
			this.showArea = true;
		},
		showClassPopup() {
			this.showAreaClass = true;
		},
		showNumberPopup() {
			this.showAreaposition = true;
		},
		showparentnamePopup() {
			this.showparentname = true;
		},
		showlounamePopup() {
			this.showlouname = true;
		},
		NumberConfirm(e) {
			if (this.rank >= 4) {
				this.position = this.selectorNumberCharge[Number(e)];
			} else {
				this.position = this.selectorNumber[Number(e)];
			}
			console.log('你选择的身份', this.position);
		},
		AreaConfirm(e) {
			this.area = this.selectorArea[Number(e)].name;
			console.log('你选择的身份', this.area);
		},
		SchoolConfirm(e) {
			this.school = this.schoolList[Number(e)].data.schoolName;
			console.log('校区：', this.school);
			this.schoolnum = Number(this.schoolList[Number(e)].data.school);
			console.log('所住楼栋：', this.schoolnum);
			this.selectorArea = this.schoolList[Number(e)].data.louList;
			console.log('所住楼栋：', this.selectorArea);
			this.selectorlouname = this.schoolList[Number(e)].data.louList;
		},
		ClassConfirm(e) {
			this.classnum = this.selectorClass[Number(e)];
		},
		CollegeConfirm(e) {
			this.college = this.selectorcollege[Number(e)];
		},
		positionConfirm(e) {
			this.position = this.selectorNumberCharge[Number(e)];
			if (this.position == '骑手' || this.position == '分餐员') {
				this.show = false;
			} else {
				this.show = true;
			}
		},
		parnameConfirm(e) {
			this.parentname = this.selectorparname[Number(e)].name;
			this.paropenid = this.selectorparname[Number(e)].openid;
		},
		lounameConfirm(e) {
			this.louname = this.selectorlouname[Number(e)].name;
		},

		// 检测输入框---------------------------
		nameInput(e) {
			this.name = e.detail.value;
			console.log(e.detail.value);
		},
		phoneInput(e) {
			this.phone = e.detail.value;
			console.log(e.detail.value);
		},
		// 地区---------------------------------
		areaInput(e) {
			this.area = e.detail.value;
			// 同步信息流---------------------------
			console.log(e.detail.value);
		},

		//提交信息
		confirm: function confirm() {
			let that = this;
			if (!this.name) {
				this.$refs.uToast.show({
					title: '请填写姓名',
					type: 'error'
				});
				return;
			}
			if (that.school == '') {
				this.$refs.uToast.show({
					title: '请选择校区',
					type: 'error'
				});
				return;
			}
			if (!this.area) {
				this.$refs.uToast.show({
					title: '请填写所在楼栋',
					type: 'error'
				});
				return;
			}
			if (that.classnum == '') {
				this.$refs.uToast.show({
					title: '请填写所在年级',
					type: 'error'
				});
				return;
			}
			if (that.college == '') {
				this.$refs.uToast.show({
					title: '请填写所在学院',
					type: 'error'
				});
				return;
			}
			if (that.position == '') {
				this.$refs.uToast.show({
					title: '请先选择身份',
					type: 'error'
				});
				return;
			}
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
			if (!reg.test(that.phone)) {
				this.$refs.uToast.show({
					title: '请输入正确的手机号',
					type: 'error'
				});
				return;
			}
			if (that.louname == '') {
				this.$refs.uToast.show({
					title: '请绑定对应楼栋',
					type: 'error'
				});
				return;
			}

			console.log(that.classnum);
			//新增楼栋长申请
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/user/registerPosition',
				data: {
					name: that.name, //姓名
					lou: that.area, //地址
					openid: that.openid, //id
					classname: that.classnum, //年级
					college: that.college, //学院
					position: that.position, //职位
					school: that.schoolnum, //学校
					paropenid: that.paropenid, //负责人id
					nameopenid: that.parentname, //负责人姓名
					louname: that.louname, //绑定楼栋
					mobile: that.phone //预留的电话号码
				},
				success(res) {
					if (res.data.status == 200) {
						that.$refs.uToast.show({
							title: '新增成功',
							type: 'success'
						});
						// setTimeout(function() {
						// 	uni.navigateBack();
						// }, 800);
					} else {
						that.$refs.uToast.show({
							title: '网络错误，请重试',
							type: 'error'
						});
						// setTimeout(function() {
						// 	uni.navigateBack();
						// }, 800);
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background: #f8f8f8;
}

.mo {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #f0f0f0;
	line-height: 40rpx;
}
.login__info__item__button {
	width: 200rpx;
	padding: 10rpx;
	border-radius: 5px;
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
}
.login__info__item__button1 {
	margin-top: 20rpx;
	width: 80%;
	height: 100rpx;
	padding: 10rpx;
	border-radius: 5px;
	text-align: center;
	padding-top: 25rpx;
	font-size: 32rpx;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
}
.mo_01 {
	padding-left: 20rpx;
	box-sizing: border-box;
	width: 80%;
	height: 40rpx;
	overflow: hidden;
	border-left: 6rpx solid #ec521b;
	font-size: 32rpx;
	font-weight: bold;
}

.mo_01 span {
	color: #8e8e8e;
	font-weight: 100;
	font-size: 24rpx;
	padding-left: 20rpx;
}


.content {
	position: relative;
}

.row {
	display: flex;
	padding: 20rpx 30rpx;
	border-bottom: #d9d9d9 1rpx solid;
	background: #fff;
}

.tit {
	font-size: 36rpx;
	/* font-weight: 600; */
	color: #303133;
}

.input {
	display: flex;
	font-size: 32rpx;
	margin-top: 5rpx;
	color: #303133;
}

.add-btn {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: 32rpx;
	color: #fff;
	background-color: #fa436a;
	border-radius: 10rpx;
	-webkit-box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.loupeoplecheck{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 380rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	/* justify-content: center; */
	margin: 10rpx 20rpx;
	padding: 10rpx 20rpx;
}
</style>
